<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('流程待办列表')"/>
    <style>
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }
        body {
            background-color: #fff;
        }
    </style>
</head>
<body class="layuimini-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form action="" class=" layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="name" placeholder="" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-md" lay-filter="backlog-query" lay-submit>
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button class="layui-btn layui-btn-md layui-btn-primary" type="reset">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
        <table id="backlog-table" lay-filter="backlog-table"></table>
        <script type="text/html" id="control-toolbar">
            <!--<button sec:authorize="hasPermission('/pro/control/add','pro:control:add')"
                    class="layui-btn layui-btn-primary layui-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>-->
        </script>
    </div>
</div>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>


<th:block th:include="include :: footer"/>
<script>
    let table;
    layui.use(['table', 'layer', 'jquery', 'form'], function () {
        let layer = layui.layer;
        table = layui.table;
        let $ = layui.jquery;
        let form = layui.form;

        table.render({
            elem: '#backlog-table'
            , method: 'get'
            , url: pName + '/process/control/data'
            , title: '流程列表'
            , skin: 'line'
            , toolbar: '#control-toolbar'
            , page: true
            , escape: true
            , height: 'full-100'
            , cols: [
                [
                    {type: 'checkbox'}
                    , {field: 'id', title: '流程编号', sort: true, width: 150}
                    , {field: 'name', title: '当前节点', width: 120}
                    , {field: 'type', title: '流程类型', sort: true, width: 120}
                    , {field: 'version', title: '流程版本', sort: true, width: 120}
                    , {field: 'definitionId', title: '部署 ID', sort: true, width: 120}
                    , {field: 'instanceId', title: '实例ID', sort: true, width: 120}
                    , {field: 'startedBy', title: '操作人', sort: true, width: 120}
                    , {title: '操作', align: 'center', toolbar: '#barDemo', width: 100}
                ]
            ]
        });

        table.on('checkbox(backlog-table)', function(obj){

        });
        table.on('row(backlog-table)', function (obj) {

        });
        table.on('tool(backlog-table)', function (obj) {
            let layEvent = obj.event;
            if (layEvent === 'del') {
                window.remove(obj);
            } else if (layEvent === 'xml') {
                window.xml(obj);
            } else if (layEvent === 'png') {
                window.png(obj);
            }
        });
        table.on('toolbar(backlog-table)', function (obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });
        form.on('submit(backlog-query)', function (data) {
            table.reload('backlog-table', {where: data.field})
            return false;
        });


        window.png = function (obj) {
            let layerIndex = layer.open({
                type: 2,
                title: 'png',
                shade: 0.1,
                area: ['99%', '99%'],
                content: pName + '/process/control/bpmnViewXML?deploymentId=' + obj.data.deploymentId + '&name=' + obj.data.resourceName
            });
            $(window).on("resize", function () {
                layer.full(layerIndex);
            });
            return false;
        }

        window.remove = function (obj) {
            layer.confirm('确认删除该流程图吗', function (index) {
                let loading = layer.load();
                $.ajax({
                    url: pName + '/process/control/remove/' + obj.data.id,
                    dataType: 'json',
                    type: 'delete',
                    success: function (data) {
                        layer.close(loading);
                        if (data.code == 1) {
                            layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                                obj.del();
                                layer.close(index);
                                table.reload('backlog-table', {where: data.field})
                                return false;
                            })
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }
    });
</script>
</body>
</html>